<template>
  <div
    style="width:100%;height:100%;display: flex;
justify-content: space-between;flex-direction:column;">
    <div class="model4Title">
      <div class="title">
        线路分析进度
        <!-- <span>（AI建议：近3月“京广高速”分析进度较慢，请重点关注）</span> -->
      </div>
      <div>
        <div class="dialogTabs">
          <div />
          <div style="display: flex">
            <el-select
              v-model="dept"
              :popper-append-to-body="false"
              popper-class="select"
              placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>

            <el-date-picker
              v-model="date"
              popper-class="indexDialog2"
              type="daterange"
              range-separator="至"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期" />
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="column">
        <Model1 ref="Model1" :dept="dept" :date="date" :rail-types="railTypes" :type="type" />
      </div>
      <div class="column1">
        <Model2 ref="Model2" :dept="dept" :date="date" :rail-types="railTypes" :type="type" />
      </div>
    </div>
  </div>
</template>
<script>
import Model1 from './dialog5/model1.vue'
import Model2 from './dialog5/model2.vue'
export default {
  components: {
    Model1,
    Model2
  },
  props: {
    type: {
      type: String,
      default: ''
    },
    railTypes: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dept: '',
      date: [],
      options: []
    }
  }
}
</script>
<style lang="scss" scoped>
.model4Title {
  height: 60px;
  width: 100%;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0;
  background: #0f1f56;
}
.model4Title .title {
  font-weight: 500;
  font-size: 16px;
  color: #fff;
}
.model4Title .title span {
  font-size: 14px;

  color: #c0796a;
}
.dialogTabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 36px;
}
.dialogTabsAction {
  background: #0a2b52 !important;
  border: 1px solid #66ffff !important;
  box-sizing: border-box;
  color: rgba(102, 255, 255, 1) !important;
}
.dialogtabLis {
  padding: 0 12px;
  height: 36px;
  background: #0f1f56;
  border: 1px solid rgba(84, 113, 255, 0.6);
  line-height: 36px;
  text-align: center;
  font-weight: 350;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}
/deep/.el-select {
  width: 150px;
  margin-right: 20px;
}
/deep/.el-select-dropdown__list {
  border: 1px solid rgba(102, 255, 255, 0.15);
}
/deep/.el-select-dropdown__item.selected.hover {
  color: rgba(102, 255, 255, 1) !important;
}
/deep/ .el-select-dropdown__item {
  color: #fff;
}
/deep/.el-select-dropdown__item.hover,
/deep/.el-select-dropdown__item:hover {
  background: rgba(102, 255, 255, 0.1) !important;
  color: #fff !important;
}
/deep/.el-select-dropdown {
  background-color: #0f1f56 !important;
  border: 0;
}
/deep/.el-popper[x-placement^="bottom"] .popper__arrow {
  display: none;
}
/deep/.el-input__inner {
  background: #0f1f56;
  color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(84, 113, 255, 0.6);
  box-sizing: border-box;
  border-radius: 2px;
}
/deep/.el-date-editor .el-range-input {
  background: #0f1f56;
  color: #fff;
}
/deep/.el-range-editor--medium .el-range-separator {
  line-height: 1.8rem;
  color: #fff;
}
.row {
  height: calc(100% - 65px);
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.column {
  width: 75%;
  background: #0f1f56;
}
.column1 {
  width: 24.5%;
  background: #0f1f56;
}
</style>
